<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型类型</td>
                    <td><input type="text" v-model="queryinfo.Nametype"/></td>
                </tr>
                <tr>
                    <td>房型图片</td>
                    <td>
                        <input type="file" @change="img" />
                        <img :src="queryinfo.Photo" width="100" height="100" alt="" v-if="queryinfo.Photo!=''"/>
                    </td>
                </tr>
                <tr>
                    <td>房型大小</td>
                    <td><input type="text" v-model="queryinfo.Size"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="添加" class="btn btn-success" @click="add"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive}from 'vue'
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();

let queryinfo=reactive({
  "Photo": "",
  "Nametype": "",
  "Size": '',
})

const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'/api/Imgphoto/Fiephoto',
        method:'post',
        data:f,
    })
    .then(res=>{
        console.log(res);
        queryinfo.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const add=()=>{
    axios({
        url:'/api/Hotel/AddHotel',
        method:'post',
        data:queryinfo,
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('房型类型已存在');
            return;
        }
        if(res.data>0){
            alert('添加成功');
            router.push('/list');
        }
        else{
            alert('添加失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>